Можете посмотреть макет?

htmlonline · February 3, 2011

Смотрите, начал верстать шаблон, вот макет:

Скажите что мне нужно добавить и исправить, пока не окончил верстку?

Vlad · February 3, 2011

Осталось этот макет красиво с бумаги перевести в компьютерный рисунок.

htmlonline · February 3, 2011

А макет нормалёный?

И еще вопрос: Как мне реализовать наложение div-ов? Я когда маргинами задю, то получается, что каждый блок оказывается под другим, и float тут не помог...

Vlad · February 3, 2011

Да как тут скажешь по такому рисунку, нормальный макет или нет. Выглядит весьма стандартно.

Наложение через z-index делается.

http://htmlbook.ru/css/z-index

htmlonline · February 3, 2011

Щас цветной вариант выложу...

Vlad · February 3, 2011

Не надо, по приведенному рисунку и так все понятно. Тем более, наброски и делают карандашом или ручкой.

htmlonline · February 3, 2011

Я просто цветовую гамму хочу показать, вдруг что.то не так...

Vlad · February 3, 2011

Эта цветовая гамма как Паваротти в исполнении Рабиновича. Пока не сделаете компьютерный макет, говорить не о чем.

htmlonline · February 3, 2011

А сверху лежит элемент чей z-index больше?

Selen · February 3, 2011

А сверху лежит элемент чей z-index больше?

Да

htmlonline · February 3, 2011

Я начал верстать, получил такую хрень!!!

Как мне блок позиционировать от правого края окна браузера на 2%?

right:2%?

Почему когда я задаю в хедере top:2%; right:2%

он находится внизу!?

psywalker · February 3, 2011

1) Ссылку на то, что уже есть

2) Скриншот того, что хочешь получить.

htmlonline · February 3, 2011

Скрин уже есть в начале темы.

Сейчас выложу, что есть...

klierik · February 3, 2011

то что в начале темы это не скрин а фотография.

Vlad · February 3, 2011

Я начал верстать, получил такую хрень!!!
Как мне блок позиционировать от правого края окна браузера на 2%?
right:2%?
Почему когда я задаю в хедере top:2%; right:2%
он находится внизу!?

position установлено?

htmlonline · February 3, 2011

Вот, что я наверстал...

position установлено?

Релатив

psywalker · February 3, 2011

Релатив

Абсолют делай

htmlonline · February 3, 2011

Вот весь код:

   <html>
   <head>
	<style type="text/css">
	 div {position.relative}
	 button.b1 {background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
				background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
				color: #ffe;
				padding:10px;
				width:16%;
				text-align:center;}
	 div.header1 {-moz-border-radius:10px;
				  -webkit-border-radius:10px;
				  border-radius:10px;
				  z-index:1;
				  background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
				  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
				  color: #ffe; width:35%;
				  height:17%;
				  top:2%; left:2%;
				  color:black}
	 div.header2 {-moz-border-radius:10px;
				  -webkit-border-radius:10px;
				  border-radius:10px;
				  z-index:2;
				  width:70%;
				  left:28%; top:2%;
				  height:15%;
				  background: -moz-linear-gradient(#4af264, #39ba4d, #4af264);
				  background: -webkit-gradient(linear, 0 0, 0 100%, from(#4af264), to(#4af264), color-stop(0.5,#39ba4d));}
	 div.header3 {top:2%; left:2%;
				  float:left;
				  -moz-border-radius:10px;
				  -webkit-border-radius:10px;
				  border-radius:10px;
				  z-index:3;
				  background: -moz-linear-gradient(#f2f2f2, #777, #404040, #252525);
				  background: -webkit-gradient(linear, 0 0, 0  100%, from(#f2f2f2), to(#252525), color-stop(0.6, #777), color-stop(0.6,  #404040));
				  color: #fff;
				  border: 2px solid  #666; float:left;
				  width:35%; height:50%;}
	 div.menu {-moz-border-radius:10px;
			   -webkit-border-radius:10px;
			   border-radius:10px; 
			   z-index:4;  
			   background: -moz-linear-gradient(#f2f2f2, #777, #404040, #252525);
			   background: -webkit-gradient(linear, 0 0, 0  100%, from(#f2f2f2), to(#252525), color-stop(0.6, #777), color-stop(0.6,  #404040));
			   color: #fff;
			   border: 2px solid  #666;
			   width:100%; top:19%;}
	 div.lc {float:left; margin-top:0%;
			 width:20%;
			 left:2%;
			 background: -moz-linear-gradient(#00bbd6, #ebffff);
			 background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));}
	 div.content {width: 75%;
				  right:2%; margin-left:1%;

				  background-color:gray;
				  -moz-border-radius:20px;
				  -webkit-border-radius:20px;
				  border-radius:20px;}
	 div.footer {background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
				 background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
				 color: #ffe;
				 width:100%;
				 height:10%
				 -moz-border-radius:20px;
				 -webkit-border-radius:20px;
				 border-radius:20px;}
	</style>			   
   </head>
   <body>
   <div class="header1">
   Место для вашей рекламы
   </div>
   <div class="header2">
   <h1>
              
   Будь успешен с NB!
   </h1>
   </div>
   <div class="header3">
   </div>
   <div class="menu">
   <center>
   <button class="b1">
   Главная
   </button>
   <button class="b1">
   О нас
   </button>
   <button class="b1">
   Хостинг
   </button>
   <button class="b1">
   Шаблоны
   </button>
   </center>
   </div>
   <div class="lc">
   left
   </div>
   <div class="content">
   content
   <div>
   <div class="footer">
   </div>
   </body>
   </html>

Psywalker, спасибо!

Vlad · February 3, 2011

Доктайп, @#$, где! Где доктайп, @#$%^&*(), спрашиваю, ǶǷǸǹǺǻǼǽǾ?

htmlonline · February 3, 2011

Я не делаю доктайп,

но здесь стрикт нужен, потому, что я новые свойства использую

Я доделал шаблон, одну его часть,

иогу показать, что получилось...

А как изменить вид поля ввода?

Vlad, специально для тебя:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   <html>
   <head>
	<style type="text/css">
	 div {position:absolute;}
	 button.b2 { background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
				background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
				color: #ffe; width:35%;text-align:center;}
	 button.b1 {background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
				background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
				color: #ffe;
				padding:10px;
				width:16%;
				text-align:center;}
	 div.header1 {-moz-border-radius:10px;
				  -webkit-border-radius:10px;
				  border-radius:10px;
				  z-index:1;
				  background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
				  background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
				  color: #ffe; width:35%;
				  height:25%;
				  top:13%; right:1%;
				  color:green; border: 1px black solid;}
	 div.header2 {-moz-border-radius:10px;
				  -webkit-border-radius:10px;
				  border-radius:10px;
				  z-index:2;
				  width:70%;
				  left:28%; top:35%;
				  height:15%;
				  background: -moz-linear-gradient(#4af264, #39ba4d, #4af264);
				  background: -webkit-gradient(linear, 0 0, 0 100%, from(#4af264), to(#4af264), color-stop(0.5,#39ba4d));}
	 div.header3 {top:2%; left:2%;
				  float:left;
				  -moz-border-radius:10px;
				  -webkit-border-radius:10px;
				  border-radius:10px;
				  z-index:3;
				  background: -moz-linear-gradient(#f2f2f2, #777, #404040, #252525);
				  background: -webkit-gradient(linear, 0 0, 0  100%, from(#f2f2f2), to(#252525), color-stop(0.6, #777), color-stop(0.6,  #404040));
				  color: #fff;
				  border: 2px solid  #666; float:left;
				  width:35%; height:50%;}
	 div.menu {-moz-border-radius:10px;
			   -webkit-border-radius:10px;
			   border-radius:10px; 
			   z-index:4;  
			   background: -moz-linear-gradient(#f2f2f2, #777, #404040, #252525);
			   background: -webkit-gradient(linear, 0 0, 0  100%, from(#f2f2f2), to(#252525), color-stop(0.6, #777), color-stop(0.6,  #404040));
			   color: #fff;
			   border: 2px solid  #666;
			   width:100%; top:50%;}
	 div.lc {float:left; top:65%;
			 -moz-border-radius:10px;
			 -webkit-border-radius:10px;
			 border-radius:10px;
			 height:50%;
			 width:20%;
			 left:2%;
			 background: -moz-linear-gradient(#00bbd6, #ebffff);
			 background: -webkit-gradient(linear, 0 0, 0 100%, from(#00BBD6), to(#EBFFFF));
			 border: 1px black solid;}
	 div.content {width: 75%;
				  right:2%;
				  top: 65%;
				  height:60%;
				  background-color:gray;
				  -moz-border-radius:20px;
				  -webkit-border-radius:20px;
				  border-radius:20px; border: 1px black solid;}
	 div.footer {background: -moz-linear-gradient(#e0f0f4, #56d1ed, #00bee8, #00bbd6);
				 background: -webkit-gradient(linear, 0 0, 0 100%, from(#e0f0f4), to(#00bbd6), color-stop(0.72, #00bee8));
				 color: #ffe;
				 width:100%;
				 height:10%;
				 -moz-border-radius:20px;
				 -webkit-border-radius:20px;
				 border-radius:20px;}
	</style>			   
   </head>
   <body>
   <div class="header1">
   Место для вашей рекламы
   </div>
   <div class="header2">
   <h1>
              
   Будь успешен с NB!
   </h1>
   </div>
   <div class="header3">
   </div>
   <div class="menu">
   <center>
         
   <button class="b1">
   Главная
   </button>
         
   <button class="b1">
   О нас
   </button>
         
   <button class="b1">
   Хостинг
   </button>
         
   <button class="b1">
   Шаблоны
   </button>
   </center>
   </div>
   <div class="lc">
   <form>
      
   Логин
   <input type="text" size="5"><br/>
    
   Пароль
   <input type="password" size="5"><br/>
   </form>
                        
   <button class="b2">
   Войти
   </button>
   </div>
   <div class="content">
   content
   <div>
   <div class="footer">
   footer
   </div>
   </body>
   </html>

!DOCTYPE указал...

arez · February 3, 2011

Это пи@#$, башорг отдыхает, что будет когда дело дойдет до програмирования <_<

htmlonline

зачем тебе все это?

Vlad · February 3, 2011

За ... каленым железом пятки прижигают. Пожалей свои пятки!

htmlonline · February 3, 2011

А какой мне сделать фон?

Белый как то не актит...

А как поубирать?

Vlad · February 3, 2011

А как поубирать?

Очень просто — del, del, del, del, del...

htmlonline · February 3, 2011

Как убpать пробелы и сделать в длинном горизонтальном меню отступы сверху и снизу.

Я переделал его польностью, залил на юкоз

htmlonline.3dn.ru/shablon.html

Vlad · February 3, 2011

Горизонтальная полоса прокрутки зачем?

Sign In

Можете посмотреть макет?

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

52 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information